<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="650" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = '20px Arial';
    ctx.textAlign = 'left';

    // --- Wire P ---
    const p_x = 180;
    const p_y = 200;
    const radius = 10;
    const cross_offset = radius / Math.sqrt(2);

    // Draw P symbol (circle with cross)
    ctx.beginPath();
    ctx.arc(p_x, p_y, radius, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(p_x - cross_offset, p_y - cross_offset);
    ctx.lineTo(p_x + cross_offset, p_y + cross_offset);
    ctx.moveTo(p_x + cross_offset, p_y - cross_offset);
    ctx.lineTo(p_x - cross_offset, p_y + cross_offset);
    ctx.stroke();

    // Label for P, mimicking the original style
    const p_label_x = 250;
    const p_label_y = 100;
    ctx.fillText('wire P', p_label_x, p_label_y);
    ctx.fillText('current into page', p_label_x, p_label_y + 25);

    // Pointer for P, mimicking the original style
    ctx.beginPath();
    ctx.moveTo(p_label_x, p_label_y + 12);
    ctx.lineTo(p_x + radius + 2, p_y - 2);
    ctx.stroke();


    // --- Wire Q ---
    // A second wire, Q, is added parallel to P.
    const q_x = 450;
    const q_y = 200;

    // Draw Q symbol (circle with dot for current out of page)
    ctx.beginPath();
    ctx.arc(q_x, q_y, radius, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(q_x, q_y, 3, 0, 2 * Math.PI);
    ctx.fill();

    // Label for Q, based on the problem description.
    const q_label_x = 480;
    const q_label_y = 100;
    ctx.fillText('wire Q', q_label_x, q_label_y);
    ctx.fillText('current of 5.0 A', q_label_x, q_label_y + 25);
    ctx.fillText('out of page', q_label_x, q_label_y + 50);

    // Pointer for Q.
    ctx.beginPath();
    ctx.moveTo(q_label_x, q_label_y + 25);
    ctx.lineTo(q_x + radius, q_y);
    ctx.stroke();


    // --- Figure Label ---
    // The figure is now Fig. 6.2
    ctx.font = 'bold 20px Arial';
    ctx.fillText('Fig. 6.2', 50, 350);

</script>
</body>
</html>